{extend name="layout/base" /}
{block name="content"}

<div class="ui equal width left aligned padded grid stackable">
    <div class="row">
        {volist name="count" id="v"}
        <div class="sixteen wide tablet four wide computer column">
            <div class="ui left aligned segment">
                <div class="ui horizontal statistic">
                    <div class="value counter">
                        {$v}
                    </div>
                    <div class="label">
                        {$key}
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>

    <div class="row">
        <div class="sixteen wide tablet eight wide computer column">
            <div class="ui segment">
                <h5 class="ui dividing header">
                    审批提醒
                </h5>
                <div class="ui middle aligned relaxed list">
                    {volist name="alarm" id="v"}
                    <div class="item">
                        <div class="right floated content">
                            <a href="{$v.url}" class="ui teal basic label">{$v.num}</a>
                        </div>
                        <div class="content">
                            {$v.title}
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>

        </div>
        <div class="sixteen wide tablet eight wide computer column">

            <div class="ui segment">
                <h4>服务器信息</h4>
                <ul class="list-group list-group-flush">
                    {volist name="serverInfo" id="v"}
                    <li class="list-group-item">{$key} : {$v}</li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="sixteen wide tablet eight wide computer column">
        </div>
        <div class="sixteen wide tablet  eight wide computer column">
        </div>
    </div>
</div>
<script>
    var countColors = ['orange', 'green', 'teal', 'purple', 'pink', 'red'];
    $('.statistic').each(function(i){
        $(this).addClass(countColors[i]);
    });
</script>
{/block}